<template>
    <div class="exam-management">
        <a-card title="考试管理" :bordered="false">
            <!-- 搜索和操作栏 -->
            <div class="toolbar">
                <a-input-search v-model:value="searchKeyword" placeholder="搜索考试名称"
                    style="width: 240px; margin-right: 16px;" @search="handleSearch" />
                <a-select v-model:value="filterStatus" placeholder="筛选状态" style="width: 120px; margin-right: 16px;"
                    allow-clear>
                    <a-select-option value="进行中">进行中</a-select-option>
                    <a-select-option value="已结束">已结束</a-select-option>
                    <a-select-option value="未开始">未开始</a-select-option>
                </a-select>
                <a-button type="primary" @click="showAddModal = true">新增考试</a-button>
            </div>

            <!-- 考试列表表格 -->
            <a-table :columns="columns" :data-source="filteredExams" row-key="id" :pagination="{ pageSize: 8 }"
                style="margin-top: 16px;">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.key === 'status'">
                        <a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag>
                    </template>
                    <template v-else-if="column.key === 'action'">
                        <a-space>
                            <a-button size="small" @click="editExam(record)">编辑</a-button>
                            <a-popconfirm title="确定要删除该考试吗？" @confirm="deleteExam(record.id)">
                                <a-button size="small" danger>删除</a-button>
                            </a-popconfirm>
                        </a-space>
                    </template>
                </template>
            </a-table>
        </a-card>

        <!-- 新增/编辑考试弹窗 -->
        <a-modal v-model:open="showAddModal" :title="editExamData ? '编辑考试' : '新增考试'" @ok="handleAddOrEditExam"
            @cancel="resetModal" :destroy-on-close="true">
            <a-form :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
                <a-form-item label="考试名称" required>
                    <a-input v-model:value="form.name" placeholder="请输入考试名称" />
                </a-form-item>
                <a-form-item label="课程" required>
                    <a-input v-model:value="form.course" placeholder="请输入所属课程" />
                </a-form-item>
                <a-form-item label="时间" required>
                    <a-date-picker v-model:value="form.time" show-time style="width: 100%"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                </a-form-item>
                <a-form-item label="状态" required>
                    <a-select v-model:value="form.status" placeholder="请选择状态">
                        <a-select-option value="未开始">未开始</a-select-option>
                        <a-select-option value="进行中">进行中</a-select-option>
                        <a-select-option value="已结束">已结束</a-select-option>
                    </a-select>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import dayjs from 'dayjs'

// mock数据
const exams = ref([
    { id: 1, name: 'AI基础考试', course: 'AI智能体开发', time: '2024-02-01 10:00:00', status: '未开始' },
    { id: 2, name: 'Vue3实战考试', course: 'Vue3实战开发', time: '2024-01-20 14:00:00', status: '进行中' },
    { id: 3, name: 'Java后端考试', course: 'Java全栈开发', time: '2024-01-10 09:00:00', status: '已结束' },
])

const searchKeyword = ref('')
const filterStatus = ref('')

const columns = [
    { title: '考试名称', dataIndex: 'name', key: 'name' },
    { title: '课程', dataIndex: 'course', key: 'course' },
    { title: '时间', dataIndex: 'time', key: 'time' },
    { title: '状态', dataIndex: 'status', key: 'status' },
    { title: '操作', key: 'action' },
]

const getStatusColor = (status: string) => {
    const map: Record<string, string> = {
        '未开始': 'default',
        '进行中': 'blue',
        '已结束': 'green',
    }
    return map[status] || 'default'
}

const filteredExams = computed(() => {
    return exams.value.filter(exam => {
        const matchKeyword = !searchKeyword.value || exam.name.includes(searchKeyword.value)
        const matchStatus = !filterStatus.value || exam.status === filterStatus.value
        return matchKeyword && matchStatus
    })
})

// 新增/编辑弹窗相关
const showAddModal = ref(false)
const editExamData = ref<any>(null)
const form = reactive({
    name: '',
    course: '',
    time: '',
    status: '',
})

const resetModal = () => {
    showAddModal.value = false
    editExamData.value = null
    form.name = ''
    form.course = ''
    form.time = ''
    form.status = ''
}

const handleAddOrEditExam = () => {
    if (!form.name || !form.course || !form.time || !form.status) return
    if (editExamData.value) {
        // 编辑
        const idx = exams.value.findIndex(e => e.id === editExamData.value.id)
        if (idx > -1) {
            exams.value[idx] = { ...editExamData.value, ...form }
        }
    } else {
        // 新增
        exams.value.push({
            id: Date.now(),
            name: form.name,
            course: form.course,
            time: form.time,
            status: form.status,
        })
    }
    resetModal()
}

const editExam = (exam: any) => {
    editExamData.value = { ...exam }
    form.name = exam.name
    form.course = exam.course
    form.time = exam.time
    form.status = exam.status
    showAddModal.value = true
}

const deleteExam = (id: number) => {
    exams.value = exams.value.filter(e => e.id !== id)
}

const handleSearch = () => { }
</script>

<style scoped>
.exam-management {
    padding: 24px;
}

.toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
</style>